<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-09-11 16:45:05
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2024-03-01 15:48:06
 * @FilePath: \dormitory-screen\src\components\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content-box">
    <!-- 加载层 -->
    <div class="loading-flex-box" v-show="loading">
      <dv-loading>加载中...</dv-loading>
    </div>
    <!-- 头部 -->
    <Header ref="header"></Header>
    <!-- 中间内容部分 -->
    <div class="screenBox" ref="screenBoxHeight" :style="'height:' + screenBoxHeight + 'px;'">
      <div class="bgBox">
        <div class="listBox">
          <div class="items" :class="'items' + indexk" v-for="(itemk, indexk) in koufenList" :key="indexk"
            v-if="indexk < 5">
            <transition enter-active-class="animated rubberBand" leave-active-class="animated fadeOutDown">
              <div class="delInfo" :class="upIndex == indexk || koufenList.length <= 5 ? 'active' : ''"
                v-if="indexk <= activeIndex && getRandomList.indexOf(indexk) != -1">
                <div class="top">
                  <span>{{ itemk[0] }}</span>
                  <span>{{ itemk[1].replaceAll('-', '') }}</span>
                </div>
                <div class="bottom">
                  <span>{{ itemk[2] }}{{ itemk[3] }}-{{ itemk[4] }}</span>
                  <span v-html="itemk[5]"></span>
                </div>
              </div>
            </transition>
            <transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
              <div class="line" v-if="indexk <= activeIndex && getRandomList.indexOf(indexk) != -1">
                <div class="linedot" :class="upIndex == indexk || koufenList.length <= 5 ? 'active' : ''"></div>
                <div class="linexin" :class="upIndex == indexk || koufenList.length <= 5 ? 'active' : ''"></div>
              </div>
            </transition>
            <transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
              <div class="feature" v-if="indexk <= activeIndex && getRandomList.indexOf(indexk) != -1">
                <div class="feature-box" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
                  <div class="pulse" :class="upIndex == indexk || koufenList.length <= 5 ? 'active' : ''"></div>
                  <div class="pulse1" :class="upIndex == indexk || koufenList.length <= 5 ? 'active' : ''"></div>
                  <div class="pulse2" :class="upIndex == indexk || koufenList.length <= 5 ? 'active' : ''"></div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
      <div class="screenTop" ref="screenTopRef">
        <div class="screenTop-left">
          <div class="title">
            <span>初中部考勤统计</span>
          </div>
          <div class="cyclegraph">
            <div id="container1"></div>
            <div class="left-row-box">
              <div class="list" v-for="(item, index) in proportion" :key="index">
                <span :style="'background:' + color[index] + ';'"></span>
                <span>{{ item.name }}</span>
                <span>{{ item.value }}</span>
              </div>
            </div>
          </div>
          <div class="cycleInfo">
            <div class="list" v-for="(item, index) in cycleOneList" :key="index">
              <div class="typeName">{{ item.rule_name.substr(0, 4) }}：{{ item.end_time.substr(5) }}</div>
              <div class="infoList">
                <div class="item" v-for="(items, indexs) in item.list" :key="indexs">
                  <div>{{ items.item.substr(0, 2) }}</div>
                  <div :style="items.item.includes('缺勤') ? 'color:#FD7603;' : ''">{{ items.count }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="screenTop-center">
          <div class="title title2">
            <span>学生宿舍加分名单</span>
          </div>
        </div>
        <div class="screenTop-left">
          <div class="title">
            <span>高中部考勤统计</span>
          </div>
          <div class="cyclegraph">
            <div id="container2"></div>
            <div class="left-row-box">
              <div class="list" v-for="(item, index) in proportion2" :key="index">
                <span :style="'background:' + color[index] + ';'"></span>
                <span>{{ item.name }}</span>
                <span>{{ item.value }}</span>
              </div>
            </div>
          </div>
          <div class="cycleInfo">
            <div class="list" v-for="(item, index) in cycleOneList2" :key="index">
              <div class="typeName">{{ item.rule_name.substr(0, 4) }}：{{ item.end_time.substr(5) }}</div>
              <div class="infoList">
                <div class="item" v-for="(items, indexs) in item.list" :key="indexs">
                  <div>{{ items.item.substr(0, 2) }}</div>
                  <div :style="items.item.includes('缺勤') ? 'color:#FD7603;' : ''">{{ items.count }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="screenBottom" :style="'height:' + screenBottomHeight + 'px;'">
        <div class="screenBottom-left">
          <div ref="ringBarTop">
            <div class="title">
              <span>初中部评分排行</span>
            </div>
            <div class="titleBox">
              <div>初中部 评分排行榜</div>
              <!-- <div>{{ scoreTotal }}分</div> -->
            </div>
          </div>
          <!-- 排名轮播表 -->
          <div class="dv-scroll-board" :style="'width:100%;height:' + ringBarHeight + 'px;overflow: hidden;'">
            <div class="rowBox" ref="con1" :class="{ anim: animate == true }">
              <div class="row-item" v-for="(item, index) in  scoreList " :key="index" style="'width:100%;"
                ref="rowItemOne">
                <div class="ranking-info">
                  <div class="info-name">{{ item.name }}</div>
                  <div class="ranking-value"> {{ item.score }}分</div>
                </div>
                <div class="ranking-column" :class="item.color">
                  <div class="inside-column"
                    :style="'width:' + ((Math.abs(item.score) * 100) / (max2 > max ? max2 : max)) + '%;'">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="screenBottom-center">
          <div class="title title2" ref="ringBarTop2">
            <span>学生签到时段</span>
          </div>
          <!-- 折线图 -->
          <div class="lineBox" :style="'height:' + ringBarHeight2 + 'px;'">
            <div class="topInfo" ref="lineChartTop">
              <div>单位/人数</div>
              <div>
                <div class="gradeList">
                  <div v-for="iteml in gradeList" :key="iteml.id" style="width: 100%;text-align:right;">
                    <div>{{ iteml.name }}：</div>
                    <div class="typeItem" v-for="k in iteml.list" :key="k.id">
                      <span :style="'background:' + k.color + ';'"></span>
                      <span>{{ k.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="lineChart" v-if="lengedList.length > 0" :style="'width:100%;height:' + lineChartHeight + 'px;'">
            </div>
            <div class="nodate" v-if="lengedList.length == 0" :style="'width:100%;height:' + lineChartHeight + 'px;'">
              <img src="../assets/img/ikon_no date.png" alt="">
              <div>不在考勤时段</div>
            </div>
          </div>
        </div>
        <div class="screenBottom-left">
          <div ref="ringBarTop">
            <div class="title">
              <span>高中部评分排行</span>
            </div>
            <div class="titleBox">
              <div>高中部 评分排行榜</div>
              <!-- <div>{{ scoreTotal2 }}分</div> -->
            </div>
          </div>
          <div class="dv-scroll-board" :style="'width:100%;height:' + ringBarHeight + 'px;overflow: hidden;'">
            <div class="rowBox" ref="con2" :class="{ anim: animate2 == true }">
              <div class="row-item" v-for="(item, index) in  scoreList2 " :key="index" style="'width:100%;"
                ref="rowItemTwo">
                <div class="ranking-info">
                  <div class="info-name">{{ item.name }}</div>
                  <div class="ranking-value"> {{ item.score }}分</div>
                </div>
                <div class="ranking-column">
                  <div class="inside-column"
                    :style="'width:' + ((Math.abs(item.score) * 100) / (max2 > max ? max2 : max)) + '%;'">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer ref="footer"></Footer>
  </div>
</template>
<script>
import Header from './Common/Header.vue'
import Footer from './Common/Footer.vue'
export default {
  name: 'Home',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      loading: false,
      color: ['#05F4F9', '#EFC241', '#9D40F9', '#FD7603', '#8E98FF', '#2251E5'],
      screenBoxHeight: 0,
      screenBottomHeight: 0,
      ringBarHeight: 0,
      ringBarHeight2: 0,
      lineChartHeight: 0,
      animate: false,
      animate2: false,
      myChart: null,
      myChart2: null,
      myChart3: null,
      // 宿舍考勤统计初中部
      proportion: [],
      // 宿舍考勤统计高中部
      proportion2: [],
      cycleOneList: [],
      cycleOneList2: [],
      // 评分初中部
      scoreList: [],
      scoreTotal: 0,
      // 评分高中部
      scoreList2: [],
      scoreTotal2: 0,
      rule_week_id: [],
      add_time: [],
      gradeList: [],
      max: 0,
      max2: 0,
      max3: 0,
      intNumTimer1: null,
      intNumTimer2: null,
      intNumTimer3: null,
      innitTimer: null,
      sum: 0,
      sum2: 0,
      rowNum: 0,// 显示条数
      lengedList: [],
      koufenList: [],
      koufenListReal: [],
      activeIndex: -1,
      needNum: 4, //需要几个随机数
      allNum: 5, //随机数范围从 0 到 allNum - 1随机选取
      getRandomList: [0, 1, 2, 3, 4], //获取生成的随机数数组
      hideIndex: -1,
      upIndex: -1,
      loadNum: 0,
    }
  },
  async mounted() {
    var that = this
    await that.getTodayRecord()
    await that.getTodayScore()
    await that.getKouFen()
    await that.getLine()
    await that.getHeight()
    if (this.lengedList.length > 0) {
      await that.getLineChart()
    }
    that.innitTimer = setInterval(async () => {
      await that.getTodayRecord()
      await that.getTodayScore()
      await that.getKouFen()
      // await that.getHeight()
      await that.getLine()
      if (this.lengedList.length > 0) {
        await that.getLineChart()
      }
    }, 1000 * 3 * 60)
    window.addEventListener('resize', () => {
      setTimeout(async () => {
        await that.getHeight()
        await that.getCycleOne()
        await that.getCycleTwo()
        await that.getLineChart()
        await that.myChart.resize()
        await that.myChart2.resize()
        await that.myChart3.resize()
      }, 100)
    })
  },
  destroyed() {
    // 使用clearInterval清除定时器
    clearInterval(this.innitTimer)
    clearInterval(this.intNumTimer1)
    clearInterval(this.intNumTimer2)
    clearInterval(this.intNumTimer3)
  },
  watch: {
    hideIndex: {
      handler: async function (newValue, oldValue) {
        if (newValue !== oldValue) {
          let num = await this.getRandomNum(1, this.koufenList.length)
          this.koufenList[this.hideIndex] = this.koufenList[num[0]]
        }
      }
    }
  },
  methods: {
    // 获取考勤统计
    async getTodayRecord() {
      if (this.loadNum === 0) {
        this.loading = true
      }
      this.loadNum = this.loadNum + 1
      const params = {
        type: 'get_now_rule',
        scene_id: '28'
      }
      const { data: res } = await this.$http.get('/Attendance/Rule/', {
        params: params
      })
      if (res.code !== 1) {
        return this.$message.error(res.msg)
      }
      this.proportion = []
      this.proportion2 = []
      this.cycleOneList = []
      this.cycleOneList2 = []
      if (res.data && res.data.length > 0) {
        this.rule_week_id = []
        this.add_time = []
        res.data.forEach((item, index) => {
          if (item.name.includes('初中')) {
            this.rule_week_id.push(item.now_rule.rule_week_id)
            this.add_time.push(item.now_rule.date)
            item.list.forEach((iteml, indexl) => {
              if (indexl === 0) {
                //  当前考情
                iteml.list.forEach((iteml, indexl) => {
                  this.proportion.push({
                    value: iteml.count,
                    percent: iteml.percent,
                    name: iteml.item
                  })
                })
                this.sum = iteml.sum
              } else {
                this.cycleOneList.push(iteml)
              }
            })
          }
          if (item.name.includes('高中')) {
            this.rule_week_id.push(item.now_rule.rule_week_id)
            this.add_time.push(item.now_rule.date)
            item.list.forEach((iteml, indexl) => {
              if (indexl === 0) {
                //  当前考情
                iteml.list.forEach((iteml, indexl) => {
                  this.proportion2.push({
                    value: iteml.count,
                    percent: iteml.percent,
                    name: iteml.item
                  })
                })
                this.sum2 = iteml.sum
              } else {
                this.cycleOneList2.push(iteml)
              }
            })
          }
        })
        // 发起折线图请求
        this.getCycleOne()
        this.getCycleTwo()
      }
    },
    // 获取宿舍评分统计
    async getTodayScore() {
      const params = {
        type: 'xuebu'
      }
      const { data: res } = await this.$http.get('/Dormitory/DataScreen/', {
        params: params
      })
      if (res.code !== 1) {
        return this.$message.error(res.msg)
      }
      if (res.data && res.data.length > 0) {
        res.data.forEach(async (item, index) => {
          if (item.name.includes('初中')) {
            this.scoreList = item.classes
            this.scoreList.reverse()
            this.max = await this.getMax(this.scoreList)
            this.scoreTotal = item.total
          }
          if (item.name.includes('高中')) {
            this.scoreList2 = item.classes
            this.scoreList2.reverse()
            this.max2 = await this.getMax(this.scoreList2)
            this.scoreTotal2 = item.total
          }
        })
      }
      await clearInterval(this.intNumTimer1)
      await clearInterval(this.intNumTimer2)
      setTimeout(() => {
        this.intNumTimer1 = null
        this.intNumTimer2 = null
        if (this.scoreList.length > this.rowNum) {
          this.intNumTimer1 = setInterval(this.ScrollUp, 4000)
        }
        if (this.scoreList2.length > this.rowNum) {
          this.intNumTimer2 = setInterval(this.ScrollUp2, 4000)
        }
      }, 600)
    },
    // 获取评分的分数最大值
    async getMax(data) {
      var barArry = []
      data.forEach((item, index) => {
        barArry.push(Math.abs(Number(item.score)))
      })
      return Math.max.apply(null, barArry)
    },
    // 向上轮播方法
    ScrollUp() {
      var con1 = this.$refs.con1
      var height = this.$refs.rowItemOne[0].clientHeight
      con1.style.marginTop = '-' + height + 'px'
      this.animate = !this.animate
      var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function () {
        // 单条滚动
        that.scoreList.push(that.scoreList[0])
        that.scoreList.shift()
        con1.style.marginTop = '0px'
        that.animate = !that.animate // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500)
    },

    ScrollUp2(val) {
      var con2 = this.$refs.con2
      var height = this.$refs.rowItemTwo[0].clientHeight
      con2.style.marginTop = '-' + height + 'px'
      this.animate2 = !this.animate2
      var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function () {
        // 单条滚动
        that.scoreList2.push(that.scoreList2[0])
        that.scoreList2.shift()
        con2.style.marginTop = '0px'
        that.animate2 = !that.animate2 // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500)
    },
    // 扣分统计
    async getKouFen() {
      const params = {
        type: 'koufen'
      }
      const { data: res } = await this.$http.get('/Dormitory/DataScreen/', {
        params: params
      })
      if (res.code !== 1) {
        return this.$message.error(res.msg)
      }
      // this.koufenList = res.data
      this.koufenList = [
        ["袁品宥", "初中部-2023级-08班", "秋实楼", "4F", "423", "<span style='color:#05F4F9;'>+1.5</span>", "正常"],
        ["李尚妍", "高中部-2023级-05班", "冬韵楼", "3F", "315", "<span style='color:#05F4F9;'>+0.5</span>", "正常"],
        ["邓梓希", "初中部-2023级-03班", "秋实楼", "3F", "315", "<span style='color:#05F4F9;'>+2</span>", "正常"],
        ["张随和", "初中部-2023级-04班", "秋实楼", "3F", "319", "<span style='color:#05F4F9;'>+2.5</span>", "正常"],
        ["崔洪翔", "初中部-2023级-02班", "秋实楼", "3F", "309", "<span style='color:#05F4F9;'>+2</span>", "正常"],

        ["杨遵楠", "高中部-2022级-09班", "春华楼", "4F", "407", "<span style='color:#05F4F9;'>+1.5</span>", "正常"],
        ["陈嘉慧", "高中部-2022级-06班", "夏菡楼", "4F", "404", "<span style='color:#05F4F9;'>+2</span>", "正常"],
        ["叶慧研", "高中部-2022级-07班", "夏菡楼", "4F", "409", "<span style='color:#05F4F9;'>+0.5</span>", "正常"],

        ["谢子悦", "高中部-2023级-14班", "春华楼", "7F", "710", "<span style='color:#05F4F9;'>+1.5</span>", "正常"],
        ["周紫菲", "高中部-2023级-13班", "夏菡楼", "7F", "717", "<span style='color:#05F4F9;'>+2</span>", "正常"],
        ["姚懿轩", "高中部-2023级-02班", "春华楼", "5F", "508", "<span style='color:#05F4F9;'>+0</span>", "正常"],

        ["王沈欣", "初中部-2022级-05班", "冬韵楼", "2F", "215", "<span style='color:#05F4F9;'>+1.5</span>", "正常"],
        ["谢钰国", "初中部-2022级-04班", "秋实楼", "2F", "213", "<span style='color:#05F4F9;'>+2</span>", "正常"],
        ["孙羽飞", "初中部-2022级-08班", "冬韵楼", "3F", "301", "<span style='color:#05F4F9;'>+0.5</span>", "正常"],

        ["温文俊", "初中部-2022级-04班", "夏菡楼", "2F", "212", "<span style='color:#05F4F9;'>+1.5</span>", "正常"],
        ["邱婉怡", "初中部-2022级-02班", "冬韵楼", "2F", "204", "<span style='color:#05F4F9;'>+2</span>", "正常"],
        ["杨虔熹", "初中部-2022级-07班", "秋实楼", "2F", "221", "<span style='color:#05F4F9;'>+0.5</span>", "正常"],

        ["赖祉呈", "高中部-2022级-08班", "夏菡楼", "4F", "411", "<span style='color:#05F4F9;'>+1.5</span>", "正常"],
        ["吴德森", "高中部-2022级-07班", "春华楼", "3F", "314", "<span style='color:#05F4F9;'>+2</span>", "正常"],
        ["张诗妍", "高中部-2022级-15班", "夏菡楼", "5F", "521", "<span style='color:#05F4F9;'>+0.5</span>", "正常"],

        ["黄惠樱", "高中部-2023级-04班", "夏菡楼", "6F", "609", "<span style='color:#05F4F9;'>+1.5</span>", "正常"],
        ["陈铠莉", "高中部-2023级-04班", "夏菡楼", "6F", "610", "<span style='color:#05F4F9;'>+2</span>", "正常"],
        ["李乐瑶", "高中部-2023级-13班", "夏菡楼", "7F", "718", "<span style='color:#05F4F9;'>+0.5</span>", "正常"],
      ]
      await clearInterval(this.intNumTimer3)
      if (this.loadNum === 1) {
        setTimeout(() => {
          this.activeIndex = 0
          this.upIndex = 0
        }, 1000)
        setTimeout(() => {
          this.activeIndex = 1
          this.upIndex = 1
        }, 1300)
        setTimeout(() => {
          this.activeIndex = 2
          this.upIndex = 2
        }, 1600)
        setTimeout(() => {
          this.activeIndex = 3
          this.upIndex = 3
        }, 1900)
        setTimeout(() => {
          this.activeIndex = 4
          this.upIndex = 4
        }, 2100)
      }
      if (this.koufenList.length > 5) {
        // 如果大于5条就轮播
        setTimeout(() => {
          this.intNumTimer3 = null
          this.intNumTimer3 = setInterval(this.ScrollUp3, 4000)
        }, 600)
      } else {
        // 如果等于或者小于5条
        // this.activeIndex = this.koufenList.length - 1
        // this.getRandomList = await this.getRandomNum(this.koufenList.length, this.koufenList.length)
      }
    },
    async ScrollUp3() {
      if (this.activeIndex < 4) {
        //  第一次让他一个个全部出来
        this.activeIndex++
        this.upIndex = this.activeIndex
      } else {
        let arr = await this.getRandomNum(4, 5)
        arr.sort((a, b) => a - b)
        if (JSON.stringify(this.getRandomList) === JSON.stringify(arr)) {
          // console.log('进来了')
          this.getRandomList = await this.getRandomNum(4, 5)
        } else {
          this.getRandomList = arr
        }
        for (var i = 0; i < 5; i++) {
          if (this.getRandomList.indexOf(i) === -1) {
            this.hideIndex = i
          }
        }
        // 查看是哪个消失了
        // console.log(this.hideIndex, this.getRandomList, '消失的下标')
        // 查找新添加的数据咋那个位置，获取他的下标
        // 消失的标是上次消失的index
        setTimeout(() => {
          this.upIndex = this.hideIndex
          // console.log(this.hideIndex, this.upIndex)
        }, 3500);
      }
    },
    // 指定范围内，指定个数，无重复的随机整数
    async getRandomNum(needNum, allNum) {
      let randomList = []; //生成的随机数组
      while (randomList.length < needNum) {
        let num = Math.floor(Math.random() * allNum);
        if (randomList.indexOf(num) == -1) {
          randomList.push(num)
        }
      }
      return randomList
    },
    // 获取折线图数据
    async getLine() {
      const params = {
        type: 'get_sushe_show_data',
        rule_week_id: this.rule_week_id.join(','),
        add_time: this.add_time.join(',')
        // add_time: '2024-02-29,2024-02-29'
      }
      const { data: res } = await this.$http.get('/Attendance/Record/', {
        params: params
      })
      if (res.code !== 1) {
        this.loading = false
        return this.$message.error(res.msg)
      }
      this.gradeList = res.data.faculty_grade
      var colorList = ['#5AF9E8', '#DFD3FC', '#E66303', '#FEE706']
      var i = 0
      this.gradeList.forEach((item, index) => {
        item.list.forEach((iteml, indexl) => {
          iteml.color = colorList[i]
          i++
        })
      })
      if (res.data && res.data.list) {
        this.lengedList = res.data.list
      }
      this.loading = false
      this.$forceUpdate()
    },
    getHeight() {
      this.screenBoxHeight = document.body.clientHeight - this.$refs.header.$el.clientHeight - this.$refs.footer.$el.clientHeight
      this.screenBottomHeight = this.screenBoxHeight - this.$refs.screenTopRef.clientHeight
      // 计算评分模块可视区域高度
      var height = this.$refs.rowItemOne[0].offsetHeight // 单条数据的高度
      this.rowNum = Math.trunc((this.screenBottomHeight - this.$refs.ringBarTop.clientHeight) / Math.ceil(this.$refs.rowItemOne[0].clientHeight))
      this.ringBarHeight = this.rowNum * Math.ceil(height)
      // 计算折线图的高度
      this.ringBarHeight2 = (this.screenBottomHeight - this.$refs.ringBarTop2.clientHeight) * 0.94 - this.nowSize(72)
      this.lineChartHeight = this.ringBarHeight2 - this.$refs.lineChartTop.offsetHeight
    },
    // 让文字根据屏幕自适应
    nowSize(val) {
      var nowClientWidth = document.documentElement.clientWidth
      return val * (nowClientWidth / 1920)
    },
    getCycleOne() {
      this.myChart = this.$echarts.init(document.getElementById('container1'))
      var option = {
        tooltip: {},
        color: this.color,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['68%', '100%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            clockWise: false, // 默认逆时针
            normal: {
              borderWidth: 2,
              borderColor: '#fff'
            },
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                position: 'center',
                formatter: `${this.sum}\n初中部`,
                lineHeight: this.nowSize(32),
                fontSize: this.nowSize(20),
                color: '#ffffff', // 文字的颜色
                fontWeight: 'bold',
                // fontFamily: 'Microsoft YaHei'
              },
              emphasis: {
                show: true
              }
            },
            data: this.proportion
          }
        ]
      }
      this.myChart.setOption(option, true)
    },
    getCycleTwo() {
      this.myChart2 = this.$echarts.init(document.getElementById('container2'))
      var option = {
        tooltip: {},
        color: this.color,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['68%', '100%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            clockWise: false, // 默认逆时针
            normal: {
              borderWidth: 2,
              borderColor: '#fff'
            },
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                position: 'center',
                formatter: `${this.sum2}\n高中部`,
                lineHeight: this.nowSize(32),
                fontSize: this.nowSize(20),
                color: '#ffffff', // 文字的颜色
                fontWeight: 'bold',
                // fontFamily: 'Microsoft YaHei'
              },
              emphasis: {
                show: true
              }
            },
            data: this.proportion2
          }
        ]
      }
      this.myChart2.setOption(option, true)
    },
    async getLineChart() {
      this.myChart3 = this.$echarts.init(document.getElementById('lineChart'))
      var timeList = []
      var gardeArr = []
      this.gradeList.forEach((item, index) => {
        item.list.forEach((iteml, indexl) => {
          gardeArr.push({
            name: item.name + iteml.name,
            color: iteml.color
          })
        })
      })
      var arr = await this.formatList(this.lengedList)
      arr.forEach(item => {
        timeList.push(item.times)
      })
      var list = []
      arr.forEach(item => {
        item.info.forEach((itemk, indexk) => {
          gardeArr.forEach((iteml, indexl) => {
            if (itemk.name !== iteml.name) {
              item.info.push({
                count: 0,
                name: iteml.name,
                times: itemk.times,
                color: gardeArr[indexl].color
              })
            } else {
              itemk.color = gardeArr[indexl].color
            }
          })
        })
        const map = new Map()
        item.info = item.info.filter(key => !map.has(key.name) && map.set(key.name, 1)) // 这里对name属性进行去重
        list = list.concat(item.info)
      })
      console.log()
      var arr2 = await this.formatList2(list)
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '10%',
          left: '0%',
          right: '0%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          },
          axisLabel: {
            color: '#EBEFF3',
            fontSize: 12,
            fontWeight: 'bold',
            interval: 'auto'
          },
          axisTick: {
            show: false,
            inside: true,
            alignWithLabel: true,
            // align: 'center',
            lineStyle: {
              color: '#00314a',
              width: 1,
              type: 'solid'
            }
          },
          splitLine: {
            show: false,
            // interval: 'auto'
            interval: 0,
            lineStyle: {
              color: 'rgba(40, 81, 167, 0.41)'
            }
          },
          data: timeList
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          },
          axisLabel: {
            color: '#EBEFF3',
            fontSize: 12,
            fontWeight: 'bold',
            interval: 0
          },
          show: true,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#6479B9'
            }
          }
        },
        series: arr2
      }
      this.myChart3.setOption(option, true)
    },
    // 将数组对象中某一属性相同的对象放在同一数组中
    async formatList(data) {
      var echararr = []
      for (var i = 0; i < data.length; i++) {
        var arrindex = echararr.findIndex((item, index, arr) => { return JSON.stringify(item.times) === JSON.stringify(data[i].times) })// 获取下标
        // 不存在盘符数据的添加盘符数据
        if (arrindex === -1) {
          echararr.push({
            times: data[i].times,
            info: [data[i]],
          })
        } else {
          // 有盘符则往盘符数据中添加
          echararr[arrindex].info.push(data[i])
        }
      }
      return echararr
    },
    async formatList2(data) {
      var echararr = []
      for (var i = 0; i < data.length; i++) {
        var arrindex = echararr.findIndex((item, index, arr) => { return JSON.stringify(item.name) === JSON.stringify(data[i].name) })// 获取下标
        // 不存在盘符数据的添加盘符数据
        if (arrindex === -1) {
          echararr.push({
            name: data[i].name,
            type: 'line',
            symbol: 'none',
            color: data[i].color,
            data: [data[i].count],
          })
        } else {
          // 有盘符则往盘符数据中添加
          echararr[arrindex].data.push(data[i].count)
        }
      }
      return echararr
    },
  }
}
</script>
<style lang="less" scoped></style>
